
<template>
  <!-- 输入框类型 -->
  <wd-input
    v-if="type === 'input'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
    :clearable="clearable"
    :value="modelValue" 
    :placeholder="placeholder"
    :type="inputType"
    :show-password="showPassword"
    :rules="rules"
    @input="handleInput"  
    @clear="handleClear"
  />

  <!-- 下拉选择器类型 -->
  <wd-select-picker
    v-else-if="type === 'select-picker'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
    :value="modelValue"
    :columns="columns"
    :placeholder="placeholder"
    :rules="rules"
    @change="handleSelectChange"
  />

  <!-- 弹出选择器类型 -->
  <wd-picker
    v-else-if="type === 'picker'"
    :label="label"
    :label-width="labelWidth"
    :prop="prop"
    :value="modelValue"
    :columns="columns"
    :placeholder="placeholder"
    :rules="rules"
    @confirm="handlePickerConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'
// 导入所需组件

// 组件属性定义
const props = defineProps({
  // 基础属性（所有类型通用）
  label: {
    type: String,
    required: true
  },
  labelWidth: {
    type: String,
    default: '100px'
  },
  prop: {
    type: String,
    required: true
  },
  modelValue: {
    type: [String, Number, Object],
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  rules: {
    type: Array,
    default: () => []
  },

  // 组件类型区分
  type: {
    type: String,
    default: 'input',
    validator: (val) => ['input', 'select-picker', 'picker'].includes(val)
  },

  // 输入框专属属性
  clearable: {
    type: Boolean,
    default: false
  },
  inputType: {  // 避免与组件类型type冲突
    type: String,
    default: 'text'
  },
  showPassword: {
    type: Boolean,
    default: false
  },

  // 选择器专属属性
  columns: {
    type: Array,
    default: () => [],
    required: (props) => props.type === 'select-picker' || props.type === 'picker'
  }
})

// 事件定义
const emit = defineEmits([
  'update:modelValue', 
  'input', 
  'clear',
  'change',
  'confirm'
])

// 输入框输入事件
const handleInput = (value) => {
  emit('update:modelValue', value)
  emit('input', value)
}

// 输入框清除事件
const handleClear = () => {
  emit('update:modelValue', '')
  emit('clear')
}

// 下拉选择器变更事件
const handleSelectChange = (value, column) => {
  emit('update:modelValue', value)
  emit('change', value, column)
}

// 弹出选择器确认事件
const handlePickerConfirm = (value, column) => {
  emit('update:modelValue', value)
  emit('confirm', value, column)
}
</script>

<style scoped>
::v-deep .wd-input,
::v-deep .wd-select-picker,
::v-deep .wd-picker {
  --input-label-color: #333;
  --input-text-color: #666;
  --input-placeholder-color: #999;
  --input-height: 50px;
  margin-bottom: 15px;
}

/* 选择器图标样式统一 */
::v-deep .wd-select-picker__icon,
::v-deep .wd-picker__icon {
  color: #999;
}
</style>